
<template>
  <div class="mine relative bg-hex-fff">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
      <div class="relative">
        <image class="pointer-events-none absolute left-0 right-0 top-0 w-100%"
               :src="`${cdnUrl}/imgs/detail/bg.png${imgVersion}`" mode="aspectFill" />
        <div class="pl-32rpx" :style="{ paddingTop: `${searchBarTop}px` }">
          <image class="h-82rpx w-204rpx" :src="`${cdnUrl}/imgs/square/logo.png${imgVersion}`" mode="scaleToFill" />
        </div>
        <div class="box-border pl-30rpx pr-30rpx pt-30rpx">
          <div>
            <div v-if="loginStore.roleId" class="flex items-center justify-between">
              <div class="mb-18rpx flex items-center">
                <div>
                  <image class="mr-24rpx h-122rpx w-122rpx rounded-100%"
                         :src="userStores.user.avatar_url || noAvater"
                         mode="scaleToFill"
                         @click="navGoTo('/pages-mine/personInfoEdit')" />
                </div>
                <div class="flex items-center">
                  <div class="mr-20rpx text-32rpx font-600 text-hex-333333">{{ userStores.user.nickname ||'登录/注册' }}</div>
                  <div v-if="userStores.user.verified===1">
                    <div
                      class="h-32rpx w-32rpx flex items-center justify-center rounded-50% bg-hex-FFA522 text-26rpx text-hex-FFFFFF">√</div>
                    <span class="ml-12rpx text-26rpx !text-hex-ABCD03">已认证</span>
                  </div>
                  <div v-else class="ml-12rpx text-26rpx !text-hex-ABCD03" @click="handleApplication">申请达人认证</div>
                </div>
              </div>
              <div class="flex items-center justify-between" @click="navGoTo('/pages-mine/personInfoEdit')">
                <!-- <image class="h-32rpx w-32rpx" :src="`${cdnUrl}/svgicons/squaremy/edit.svg${imgVersion}`" mode="scaleToFill" /> -->
              </div>
            </div>
            <div v-else class="flex items-center justify-between">
              <div class="mb-18rpx flex items-center" @click.stop="goLogin">
                <div>
                  <image class="mr-24rpx h-122rpx w-122rpx rounded-100%"
                         :src="noAvater"
                         mode="scaleToFill" />
                </div>
                <div class="flex items-center">
                  <div class="mr-20rpx text-36rpx font-600 text-hex-333333">登录/注册</div>
                  <div
                    class="h-32rpx w-32rpx flex items-center justify-center text-26rpx text-hex-FFFFFF" />
                  <!-- <span class="ml-12rpx text-24rpx text-hex-ABCD03">达人认证</span> -->
                </div>
              </div>
              <div class="flex items-center justify-between">
                <!-- <image class="h-32rpx w-32rpx" :src="`${cdnUrl}/svgicons/squaremy/edit.svg${imgVersion}`" mode="scaleToFill" /> -->
              </div>
            </div>
            <div class="relative">
              <image
                :src="`${cdnUrl}/imgs/healthProgramme/health.png${imgVersion}`"
                mode="scaleToFill"
                class="absolute right-32rpx z--10 h-156rpx w-154rpx -top-130rpx"
              />
              <image class="absolute left-0 right-0 top-0 z--9 w-100%"
                     :src="`${cdnUrl}/imgs/squaremy/background-block.png${imgVersion}`" mode="widthFix" />
              <div class="box-border flex items-center justify-around pt-40rpx">
                <div v-for="(item, index) in tabList.infoConut" class="flex flex-col items-center">
                  <div class="text-center" @click="navGoTo(item.pageUrl??null)">
                    <span class="mr-8rpx text-24rpx text-hex-FFFFFF">{{ item.text }}</span>
                    <span class="JinBuTi-Regular font-DingTalk text-28rpx font-bold text-hex-fff">{{ item.conut }}</span>
                    <span v-if="index !==3" class="ml-56rpx inline-block h-18rpx w-2rpx bg-hex-fff" />
                  </div>
                </div>
              </div>
              <div class="z-99 box-border pb-20rpx pt-64rpx">
                <image
                  :src="`${cdnUrl}/imgs/home/bg2.png${imgVersion}`"
                  mode="widthFix"
                  class="pointer-events-none absolute top-64rpx h-174rpx w-100% w-750rpx -left-32rpx"
                />
                <div class="flex justify-around">
                  <div
                    v-for="menu1 in tabList.menu1" :key="menu1.index"
                    class="flex flex-col items-center justify-center text-28rpx text-hex-666666"
                    @click="navGoTo(menu1.pageUrl??null)"
                  >
                    <div class="z-999 h-96rpx w-96rpx flex items-center justify-center">
                      <image class="h-100rpx w-100rpx" :src="menu1.imgUrl" mode="scaleToFill" />
                    </div>
                    <span class="z-999 text-24rpx text-hex-333">{{ menu1.text }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-32rpx pl-30rpx pr-30rpx">
      <div>
        <swiper indicator-dots autoplay circular indicator-active-color="#abcd03">
          <swiper-item class="overflow-hidden rounded-32rpx" @click="navTo('/pages-health/healthProgramme')">
            <image
              :src="`${cdnUrl}/imgs/squaremy/report.png${imgVersion}`"
              class="mb-32rpx h-226rpx w-100% rounded-32rpx"
              mode="widthFix"
            />
          </swiper-item>
          <swiper-item class="overflow-hidden rounded-32rpx" @click="navTo('/pages-health/healthProgramme')">
            <image
              :src="`${cdnUrl}/imgs/squaremy/report.png${imgVersion}`"
              class="mb-32rpx w-100% rounded-32rpx"
              mode="widthFix"
            />
          </swiper-item>
        </swiper>
      </div>
      <div class="mt-32rpx">
        <div class="title text-28rpx font-600 text-hex-333">常用功能</div>
        <div class="mt-32rpx">
          <div class="flex justify-around">
            <div
              v-for="menu2 in tabList.menu2"
              :key="menu2.index"
              class="relative flex flex-col items-center justify-center text-28rpx text-hex-666666"
              @click="navGoTo(menu2.pageUrl??null)"
            >
              <template v-if="menu2.index === '5'">
                <div class="absolute top-10rpx h-96rpx w-96rpx flex items-center justify-center">
                  <image class="h-50rpx w-50rpx" :src="menu2.imgUrl" mode="scaleToFill" />
                </div>
                <div class="h-20rpx" />
              </template>
              <template v-else>
                <div class="h-96rpx w-96rpx flex items-center justify-center">
                  <image class="h-50rpx w-50rpx" :src="menu2.imgUrl" mode="scaleToFill" />
                </div>
              </template>
              <template v-if="menu2.index === '5'">
                <button type="default" open-type="contact" class="box-border bg-hex-fff pt-76rpx text-24rpx text-hex-333">{{ menu2.text }}</button>
              </template>
              <template v-else>
                <span class="box-border text-24rpx text-hex-333">{{ menu2.text }}</span>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-32rpx">
        <div class="mb-20rpx">
          <break-divider class="font-600" text="猜你喜欢" />
        </div>
        <s-waterfall :datalist="collectShop" :column="2" class="mt-32rpx">
          <template #default="{ item }">
            <div class="mb-30rpx mr-28rpx rounded-32rpx bg-hex-fff pb-10rpx shadow" @click.stop="navTo(`/pages-shop/goodsdetails?productId=${item.productId}`)">
              <div class="bg-water box-border w-326rpx flex items-center justify-center rounded-xl bg-hex-FAF9F8 p-40rpx">
                <image
                  class="will-change h-100% w-100% rounded-24rpx"
                  lazy-load
                  :src="item.productImage" mode="widthFix" />
              </div>
              <div class="p-15rpx">
                <div class="mb-10rpx flex items-center">
                  <div
                    v-if="item.newState===1"
                    class="w-48rpx rounded-5rpx bg-hex-FFF2E3 p-3rpx text-20rpx font-500 text-hex-E89C43">
                    上新
                  </div>
                  <text
                    class="multiLine-hiddle hide2 mx-10rpx inline-block text-24rpx text-hex-333">
                    {{ item.productIntro }}</text>
                </div>

                <div class="flex items-center justify-between">
                  <div>
                    <div class="flex items-end">
                      <div class="text-32rpx font-400 text-hex-ff4d4e">¥{{ item.productPrice }}</div>
                      <!-- <div class="textdecor ml-10rpx text-24rpx font-500 text-hex-999">￥{{ item.cost }}</div> -->
                    </div>

                  </div>
                  <div class="textdecor text-24rpx font-500 text-hex-999">已售{{ item.saleNum??0 }}</div>
                </div>
              </div>
            </div>
          </template>
        </s-waterfall>
      </div>
    </div>
    <div class="h-167rpx">
      <tab-bar />
    </div>
  </div>

</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const loginStore = useLoginStore()
const userStores = useUserStore()
let searchBarTop: any = $ref('24')
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  uni.hideTabBar()
})
let tabList: any = $ref({
  menu1: [],
  menu2: [],
  infoConut: [],
})
const noAvater = 'https://qqy-1254346585.cos.ap-nanjing.myqcloud.com/qqy/imgs/square/header.png'
let collectShop: any = $ref([])
watchEffect(() => {

  tabList.menu1 = [
    { index: '1', text: '我的订单', imgUrl: `${cdnUrl}/svgicons/squaremy/order.svg${imgVersion}`, pageUrl: '/pages-mine/order' },
    { index: '2', text: '我的评价', imgUrl: `${cdnUrl}/svgicons/squaremy/evaluate.svg${imgVersion}`, pageUrl: '/pages-mine/mineEvaluate' },
    { index: '3', text: '优惠券', imgUrl: `${cdnUrl}/svgicons/squaremy/coupon.svg${imgVersion}`, pageUrl: '/pages-mine/coupon' },
    { index: '4', text: '积分', imgUrl: `${cdnUrl}/svgicons/squaremy/integral.svg${imgVersion}`, pageUrl: '/pages-mine/integral' },
    { index: '5', text: '收藏', imgUrl: `${cdnUrl}/svgicons/squaremy/collect.svg${imgVersion}`, pageUrl: '/pages-mine/collect' },
  ]
  tabList.menu2 = [
    { index: '1', text: '浏览记录', imgUrl: `${cdnUrl}/svgicons/squaremy/record.svg${imgVersion}`, pageUrl: '/pages-mine/browsing-history' },
    { index: '2', text: '个人主页', imgUrl: `${cdnUrl}/svgicons/squaremy/personal-home.svg${imgVersion}`, pageUrl: `/pages-square/my?userId=${userStores.user.id}` },
    { index: '3', text: '消息', imgUrl: `${cdnUrl}/svgicons/squaremy/message.svg${imgVersion}`, pageUrl: '/pages-mine/message' },
    { index: '4', text: '地址管理', imgUrl: `${cdnUrl}/svgicons/squaremy/address.svg${imgVersion}`, pageUrl: '/pages-mine/address' },
    { index: '5', text: '客服中心', imgUrl: `${cdnUrl}/svgicons/squaremy/customer.svg${imgVersion}`, pageUrl: '' },
  ]
  tabList.infoConut = [
    { index: '1', text: '粉丝', pageUrl: `/pages-mine/fans?userId=${userStores.user.id}`, conut: userStores.user.fansCount ?? 0 },
    { index: '2', text: '关注', pageUrl: `/pages-mine/attentions?userId=${userStores.user.id}`, conut: userStores.user.attentionCount ?? 0 },
    { index: '3', text: '分享', conut: 2, pageUrl: '/pages-mine/share-list' },
    { index: '4', text: '点赞', pageUrl: `/pages-mine/like?userId=${userStores.user.id}`, conut: 2 },
  ]
})

//路由跳转
const navTo = (url) => {
  if (url) {
    uni.navigateTo({ url })
  }
}
const fnApplicationApi = (options, method, msg) => {
  // eslint-disable-next-line no-async-promise-executor
  return new Promise(async (resolve, reject) => {
    const { data, status } = await Fetch('/api/s/t/user_verified_application',
      { method, data: options, headers: { timestamp: Date.now() } })
    if (status === 200 && data.code === 0) {
      uni.showToast({
        title: msg,
        icon: 'none',
        duration: 2000,
      })
      resolve(data)
    } else {
      reject(data.msg)
    }
  })
}
//申请达人
const handleApplication = async () => {
  const { data, error, status } = await Fetch('/qqyapi/member/userVerifiedApplications/exist', {
    method: 'get',
  })
  if (status === 200 && data.code === 0) {
    if (!data.result) {
      fnApplicationApi({
        contact_mobile: userStores.user.mobile,
        status: 0,
        user_id: userStores.user.id,
        nickname: userStores.user.nickname,
      }, 'put', '申请成功')
    } else {
      uni.showToast({
        title: '已申请不能重复申请',
        icon: 'none',
        duration: 2000,
      })
    }
  }
}

let pageNo = $ref(1)
let totalPage = $ref(0)
//获取猜你喜欢数据
const getLikeData = async () => {
  const { data, error, status } = await Fetch('/qqyapi/product/product/categoryArea/recommendProductList', {
    method: 'get',
    data: { appType: 3, pageNo, pageSize: 10 }, //首页只展示3个，点击查看更多
  })
  if (status === 200 && data.code === 0) {
    collectShop = [...collectShop, ...data.result.list]
    totalPage = data.totalPage
  }
}
//下滑加载更多数据
const getMoreData = () => {
  if (totalPage !== pageNo) {
    pageNo++
    getLikeData()
  }
}

const goLogin = () => {
  if (!loginStore.roleId) {
    loginStore.setIsBack(true)
    loginStore.isGoLogin()

  }
}
const navGoTo = (url) => {
  if (!loginStore.roleId && url) {
    loginStore.setIsBack(true)
    loginStore.isGoLogin()
    return
  }
  navTo(url)
}
onReachBottom(() => {
  getMoreData()
})
onMounted(async () => {
  getLikeData()
  userStores.useGetInfoData()
})
</script>

<style lang="scss" scoped>
.mine{
  .multiLine-hiddle{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 显示两行文本 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  button::after {
    border: none;
  }

  button {
    background-color: transparent;

  }
}
</style>
